// 添加头部
$(".headerBox").load("http://localhost:3000/public/header.html .zxt_header")
// 添加尾部
$(".footerBox").load("http://localhost:3000/public/header.html .zxt_footer")




class details{
    constructor(){
        this.url = "http://localhost:3000/api";
        this.tbody = document.querySelector("tbody");
        this.allNum=document.getElementById("allNum")

        // 1. 读取本地存储中的数据
        this.getLocal();
        // 2. 读取后端的商品数据
        this.load();
        // 4. 添加事件
        this.addEvent();
    }
    addEvent(){
        const that = this;
        this.tbody.addEventListener("input",function(eve){
            const e = eve || window.event;
            const target = e.target || e.srcElement;
            if(target.className === "setNum"){
                // 获取id
                that.id = target.parentNode.parentNode.getAttribute("index");
                // 获取数量
                that.num = target.value-0;
                console.log(that.id,that.num)
                // 5. 根据获取到的数量，修改本地数据
                that.setLocal(function(i){
                    that.goods[i].num = that.num;
                });
            }
            var sum=0
            for(let i=0;i<that.goods.length;i++){
                sum+=that.goods[i].num;
            }
            // console.log(sum)
            that.allNum.innerHTML= sum;
        })

        
        this.tbody.addEventListener("click",function(eve){
            const e = eve || window.event;
            const target = e.target || e.srcElement;
            if(target.className === "delete"){
                // 获取id
                that.id = target.parentNode.parentNode.getAttribute("index");
                // console.log(that.id);
                // 手动删除DOM元素
                target.parentNode.parentNode.remove();
                // 6. 删除本地数据中的指定商品
                that.setLocal(function(i){
                    that.goods.splice(i, 1)
                });
            }

            var sum=0
            for(let i=0;i<that.goods.length;i++){
                sum+=that.goods[i].num;
            }
            // console.log(sum)
            that.allNum.innerHTML= sum;
        })
        
    }
    setLocal(cb){
        // 遍历，找到要操作的数据
        let i = 0;
        this.goods.some((val,idx)=>{
            i = idx;
            return val.id === this.id;
        })
        // 执行外部传入的操作功能，同时将遍历到的要操作的数据的索引，传回去
        cb(i);
        // 再将操作之后的数据，存回本地存储
        localStorage.setItem("goods", JSON.stringify(this.goods));
    }
    getLocal(){
        // 读本地数据
        this.goods = localStorage.getItem("goods") ? JSON.parse(localStorage.getItem("goods")) : [];
        // console.log(this.goods)
    }
    load(){
        // 开启ajax读后端数据
        ajax({
            url:this.url,
            data:{
                type:"getGoods"
            },
            success:res=>{
                this.res = JSON.parse(res);
                // console.log(this.res);
                // 3. 渲染页面
                this.render();
            }
        })
    }
    render(){
        console.log(this.res)
        console.log(this.goods)
        let str = "";
        // 遍历后端数据
        this.res.forEach(val1=>{
            // 遍历本地数据
            this.goods.forEach(val2=>{
                // 比对id
                if(val1.index === val2.id){
                    console.log(val1);
                    // 拼接页面结构
                    str+=`
                    <tr index="${val2.id}" class="cart_item">
                    <td><input type="checkbox" class="che"></td>
                    <td class="view">
                        <div class="view">
                            <a class="cart_item_pic" href="#">
                            <img src="${val1.bigImg}" alt="">
                            </a>
                            <a class="cart_item_link" href="#">${val1.title}
                            </a>
                            <p class="kind">${val1.number}</p>
                        </div>
                    </>
                    <td class="price">￥${val1.money}</td>
                    <td class="num"><input type="number" class="setNum" value="${val2.num}"></td>
                    <td class="sum">￥${val2.num * val1.money}</td>
                    <td ><input type="button" value="删除" class="delete" id="delete"></td>
                </tr>
                    `
                }
            })
        })
        // 将拼接好的页面结构，填充到页面
        this.tbody.innerHTML = str;

        // 7.计算总数量
        // console.log(this.goods)
        var sum=0
        for(let i=0;i<this.goods.length;i++){
            sum+=this.goods[i].num;
        }
        // console.log(sum)
        this.allNum.innerHTML= sum;

    }
}

// new details();












require.config({
    baseUrl:"./",
    paths:{
        jq: "./libs/jquery",
        gg: "./modules/getGoods",
        cr: "./modules/cartRender",
        rl: "./modules/resetLocal"
    }
});
require(["jq","gg","cr","rl"],function(_, getGoods, render, resetLocal){

    const url = "http://localhost:3000/api";
    const tbody = $("tbody");
    
    // 1. 获取本地数据
    let goods = localStorage.getItem("goods") ? JSON.parse(localStorage.getItem("goods")) : [];

    // console.log(goods)
    // 2. 获取服务器数据
    getGoods(url,res=>{
        res = JSON.parse(res);
        // 3. 渲染
        render(goods, res, tbody);

        // 6. 页面渲染完成之后，计算总数量
        // $("#allNum").html(allNum(goods));
        var sum=0
        for(let i=0;i<goods.length;i++){
            sum+=goods[i].num;
        }
        // console.log(sum)
        allNum.innerHTML= sum;

        // 7. 页面渲染完成之后，计算总价
        // $("#allPrice").html(allPrice(goods));
    })

    // 4. 绑定各种事件，开始各种购物车操作
    tbody.on("click", ".delete", function(){
        const id = $(this).parent().parent().attr("index");
        $(this).parent().parent().remove();
        // console.log(id)
        // 5-1. 删除操作同步到本地数据
        resetLocal(goods, id, function(i){
            goods.splice(i, 1)
        })

        // 删除之后，计算总数量
        // $("#allNum").html(allNum(goods));

        var sum=0
        for(let i=0;i<goods.length;i++){
            sum+=goods[i].num;
        }
        allNum.innerHTML= sum;
        // 删除之后，计算总价
        // $("#allPrice").html(allPrice(goods));



        $("#allCheck")[0].checked=allFlag(goods);

    })

    tbody.on("change", ".check", function(){
        const id = $(this).parent().parent().attr("index");
        // $(this).parent().parent().remove();
        const flag=this.checked;
        // 5-1. 删除操作同步到本地数据
        resetLocal(goods, id, function(i){
            goods[i].flag=Number(flag)
        })


        $("#allCheck")[0].checked=allFlag(goods);
    })
    $("#allCheck")[0].checked=allFlag(goods);
    $("#allCheck").change(function(){
        
        goods.forEach(val=>{
            val.flag=Number(this.checked)
        })
        for(var i=0;i<$(".check").length;i++){
            $(".check")[i].checked=this.checked;
        }

        localStorage.setItem("goods", JSON.stringify(goods))

    })

    tbody.on("input", ".setNum", function(){
        const id = $(this).parent().parent().attr("index");
        const num = $(this).val()-0;
        // console.log(id, num)
        // 5-2. 修改操作同步到本地数据
        resetLocal(goods, id, function(i){
            goods[i].num = num
        })
        // 修改之后，计算总数量
        // $("#allNum").html(allNum(goods));

        var sum=0
        for(let i=0;i<goods.length;i++){
            sum+=goods[i].num;
        }
        allNum.innerHTML= sum;
        // 修改之后，计算总价
        // $("#allPrice").html(allPrice(goods));
    })
})



function allFlag(goods){
    return goods.every(val=>val.flag)
}
